<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的订单',
  },
}
</route>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function back() {
  uni.navigateBack()
}

const tabs = ref(['全部订单', '待付款', '待使用', '已完成'])
const tab = ref('全部订单')

// 模拟一个异步获取数据的函数
async function fetchDetail(query: any) {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 这里可以根据实际情况从 API 获取数据
      resolve({ type: query.type || '默认 TYPE' })
    }, 100) // 模拟延迟
  })
}

// 使用 async/await 处理异步操作
onLoad(async (query) => {
  console.log('query:', query)
  try {
    const result = await fetchDetail(query)
    tab.value = result.type as string
  }
  catch (error) {
    console.error('获取订单类型失败:', error)
  }
})

const orderList = ref([
  {
    merchant: 'XXX店',
    img: 'https://img.meituan.net/csc/792f73808d45c47b28c40de1548f11621228590.jpg',
    name: 'xxx服饰',
    amount: 2,
    content: [
      {
        name: 'xxx服装',
        amount: 2,
        price: 80.00,
      },
      {
        name: 'xxx道具',
        amount: 4,
        price: 90.00,
      },
    ],
    status: '待付款',
  },
  {
    merchant: 'XX餐厅',
    img: 'https://img.meituan.net/csc/792f73808d45c47b28c40de1548f11621228590.jpg',
    name: 'xx美食',
    amount: 2,
    content: [
      {
        name: '披萨',
        amount: 1,
        price: 28.00,
      },
    ],
    status: '待使用',
  },
])

// 脚本中：接收事件参数（当前选中的tab名称）
function handleTabChange(currentTab) {
  console.log('组件传递的当前tab:', currentTab) // 优先打印事件参数
  tab.value = currentTab.name
}

// 根据当前tab筛选订单
const filteredOrders = computed(() => {
  if (tab.value === '全部订单') {
    // 全部订单：返回所有订单
    return orderList.value
  }
  else {
    // 其他Tab：返回状态匹配的订单
    return orderList.value.filter(item => item.status === tab.value)
  }
})
</script>

<template>
  <view class="box-border min-h-[100vh] overflow-hidden bg-[#f4f4f4]">
    <!-- 导航栏 -->
    <view class="fixed top-0 z-20 w-full bg-white transition-all duration-300">
      <view class="bg-white" :style="{ height: `${safeAreaInsets?.top}px` }" />
      <view class="h-11 flex items-center bg-white px-4">
        <wd-icon name="thin-arrow-left" size="22px" @click="back" />
        <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
          我的订单
        </h1>
      </view>
    </view>
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${safeAreaInsets?.top + 20}px` }" />
    <!-- 选项卡 -->
    <wd-tabs v-model="tab" swipeable @change="handleTabChange">
      <block v-for="item in tabs" :key="item">
        <wd-tab :title="item" :name="item" />
      </block>
    </wd-tabs>
    <!-- tab内容区域 -->
    <view class="mt-5">
      <!-- 遍历筛选后的订单列表 -->
      <block v-for="(item, index) in filteredOrders" :key="index">
        <wd-card :title="item.merchant">
          <view class="h-20 flex">
            <image :src="item.img" mode="aspectFill" class="mr-24rpx h-22 w-22 rounded-md" />
            <view class="w-70%">
              <view class="flex justify-between text-32rpx text-black">
                <view>{{ item.name }}</view>
              <!-- <view> ￥ {{ sum / order.amount }} </view> -->
              </view>
              <view
                v-for="(sonItem, sonIndex) in item.content" :key="sonIndex"
                class="mt-1 flex justify-between text-28rpx text-gray"
              >
                <view>{{ sonItem.name }}</view>
                <view> x{{ sonItem.amount }} </view>
              </view>
            </view>
          </view>
          <template #footer>
            <view class="my-3">
              <text class="text-26rpx text-gray">
              <!-- 共{{ total }}件 -->
              </text>
              <text>
                总计￥
                <text class="ml-[-10rpx] text-40rpx">
                  <!-- {{ sum }} -->
                </text>
              </text>
            </view>
          </template>
        </wd-card>
      </block>

      <!-- 当筛选后无数据时显示提示 -->
      <view v-if="filteredOrders.length === 0">
        <wd-card>
          <DefaultPlaceholder v-if="filteredOrders.length === 0" image-src="https://m.360buyimg.com/i/jfs/t1/297780/32/20339/4438/686b550dF8d6d56d8/63a35372fb3457b4.jpg" :text="`暂无${tab}的订单`" />
        </wd-card>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
